<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#wall{
				
				position: relative;
			}
			#wall img{
				position: absolute;
				transform: scale(0.6);
				height: 200px;
				max-width: 300px;
			}
			#wall img:nth-of-type(1){
				left: 5px;
				top: 15px;
				transform: rotate(20deg);
			}
			#wall img:nth-of-type(2){
				left: 80px;
				top: 123px;
				transform: rotate(70deg);
			}
			#wall img:nth-of-type(3){
				left: 200px;
				top: 55px;
				transform: rotate(40deg);
			}
			#wall img:nth-of-type(4){
				left: 270px;
				top: 35px;
				transform: rotate(90deg);
			}
			#wall img:nth-of-type(5){
				left: 320px;
				top: 55px;
				transform: rotate(200deg);
			}
			#wall img:nth-of-type(6){
				left: 350px;
				top: 0px;
				transform: rotate(40deg);
			}
			#wall img:nth-of-type(7){
				left: 430px;
				top: 75px;
				transform: rotate(100deg);
			}
			#wall img:nth-of-type(8){
				left: 200px;
				top: 205px;
				transform: rotate(240deg);
			}
			#wall img:nth-of-type(9){
				left: 400px;
				top: 95px;
				transform: rotate(340deg);
			}
			#wall img:hover{
				left: 500px;
				top: 50px;
				transform: scale(2);
				transition: all 0.6s ease-in-out;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div id="wall">
			<img src="images/1.jpg"/>
			<img src="images/2.jpg"/>
			<img src="images/3.jpg"/>
			<img src="images/4.jpg"/>
			<img src="images/5.jpg"/>
			<img src="images/6.jpg"/>
			<img src="images/7.jpg"/>
			<img src="images/8.jpg"/>
			<img src="images/9.jpg"/>
		</div>
	</body>
</html>
